﻿@namespace Masa.Tsc.Web.Admin.Rcl.Pages.Apm.Services
@inherits ApmComponentBase

<div class="mx-4">
    @* <div class="d-flex py-4">
    <div class="col-6 rounded-lg pa-0" style="border:solid #ccc 1px">
    <MCard>
    <MCardSubtitle Class="font-weight-black h6 py-2">
    Span Count
    </MCardSubtitle>
    <MCardText Class="py-0">
    <MECharts Option="@(new())" Height="200" Style="@("width:100%")" />
    </MCardText>
    </MCard>
    </div>
    <div class="col-6 pa-0">
    <div style="border:solid #ccc 1px;height:284px" class="rounded-lg ma-0 ml-4">
    <MCard>
    <MCardSubtitle Class="font-weight-black h6 py-2">
    Time spent spans
    </MCardSubtitle>
    <MCardText Class="py-0">
    <MECharts Option="@(new())" Height="200" Style="@("width:100%")" />
    </MCardText>
    </MCard>
    </div>
    </div>
    </div> *@

    <div class="col-12 rounded-lg" style="border:solid #ccc 1px">
        <SDataTable Headers="headers"
                    Height="@("calc(100vh - 360px)")"
                    Stripe
                    MustSort
                    FixedHeader
                    ServerItemsLength="total"
                    ItemsPerPage="defaultSize"
                    Items="data"
                    TItem="ListChartData"
                    Loading="@isTableLoading"
                    OnOptionsUpdate="OnTableOptionsChanged">
            <ItemColContent>
                @if (context.Header.Value == nameof(ListChartData.Name))
                {
                    <MTooltip Top Context="tooltipContent">
                        <ActivatorContent>
                            <div @attributes="@tooltipContent.Attrs" style="width:400px;overflow:hidden" class="text-truncate">
                                <a href="/apm/endpoints/@(HttpUtility.UrlEncode(context.Item.Name)+ GetUrlParam(service: context.Item.Service, env: GetSearchEnv(Search.Environment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint,method:context.Item.Method, comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End))"
                                   title="@context.Item.Name">@context.Item.Name</a>
                            </div>
                        </ActivatorContent>
                        <ChildContent>
                            <span>@context.Item.Name</span>
                        </ChildContent>
                    </MTooltip>
                }
                else if (context.Header.Value == nameof(ListChartData.Latency))
                {
                    <div class="d-flex justify-start">
                        <div>
                            @($"{context.Item.Latency} ms")
                        </div>
                        <div>
                            @if (context.Item.LatencyChartData != null && context.Item.LatencyChartData.HasChart)
                            {
                                <MECharts Option="@GetLatencyChartData(context.Item).Data" Width="80" Height="24" />
                            }
                            else
                            {
                                <MIcon>mdi-chart</MIcon>
                            }
                        </div>
                    </div>
                }
                else if (context.Header.Value == nameof(ListChartData.Throughput))
                {
                    <div class="d-flex justify-start">
                        <div>
                            @($"{context.Item.Throughput} tpm")
                        </div>
                        <div>
                            @if (context.Item.ThroughputChartData != null && context.Item.ThroughputChartData.HasChart)
                            {
                                <MECharts Option="context.Item.ThroughputChartData.Data" Width="80" Height="24" />
                            }
                            else
                            {
                                <MIcon>mdi-chart</MIcon>
                            }
                        </div>
                    </div>
                }
                else if (context.Header.Value == nameof(ListChartData.Failed))
                {
                    <div class="d-flex justify-start">
                        <div>
                            @($"{context.Item.Failed} %")
                        </div>
                        <div class="ml-2">
                            @if (context.Item.FailedChartData != null && context.Item.FailedChartData.HasChart)
                            {
                                <MECharts Option="context.Item.FailedChartData.Data" Width="80" Height="24" />
                            }
                            else
                            {
                                <MIcon>mdi-chart</MIcon>
                            }
                        </div>
                    </div>
                }
            </ItemColContent>
        </SDataTable>
        <MCard Rounded=true Class="px-6" Style="border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;">
            <SPagination Class="mt-2" Page="page" PageSize=defaultSize Total=total OnChange="OnPageChange" />
        </MCard>
    </div>
</div>